<template>
  <div>
    <el-form :model="queryParam" :inline=true style="display: flex">
      <el-form-item label="用户名称">
        <el-input v-model="queryParam.username" style="width:160px"/>
      </el-form-item>
      <el-form-item label="code">
        <el-input v-model="queryParam.code" style="width:160px"/>
      </el-form-item>
      <el-form-item label="k线">
        <el-select v-model="queryParam.showGraph" placeholder="请选择" :clearable=true style="width:160px">
          <el-option v-for="t in showStatus" :label="t.name" :value="t.value" :key="t.value"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryPage">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="序号" width="80"></el-table-column>
      <el-table-column prop="username" label="用户名" width="70"></el-table-column>
      <el-table-column prop="code" label="编码" width="70"></el-table-column>
      <el-table-column prop="name" label="名称" width="80"></el-table-column>
      <el-table-column prop="companyName" label="公司名" width="260"></el-table-column>
      <el-table-column prop="lastPriceUpdateTime" label="日期" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lastPriceUpdateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="lastPrice" label="最新价" width="100"></el-table-column>
      <el-table-column label="图像" width="700">
        <template slot-scope="scope">
          <div class="echart" :id='"mychart"+scope.$index' style="width:100%; height: 300px;"
               v-show="scope.row['days'] !=null && scope.row['days'].length>0"></div>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import {parseTime} from '@/utils'
import * as echarts from "echarts";
import store from "../../../store";

export default {
  data() {
    return {
      // 查询参数
      queryParam: {
        code: '',
        username: '',
        showGraph: '1'
      },
      tableData: [],
      showStatus: store.listDictionary('isShow')
    }
  },
  mounted() {
    this.pageList()
  },
  updated() {
    this.showChart(this.tableData)
  },
  methods: {
    parseTime,
    queryPage() {
      let _this = this
      _this.pageList()
    },
    pageList() {
      let _this = this

      let param = {
        showGraph: _this.queryParam.showGraph,
        username: _this.queryParam.username,
        code: _this.queryParam.code
      }
      this.$api.collectList(param).then(res => {
        if (res.code === '00000') {
          _this.tableData = res.data
        } else {
          _this.$message(res.msg)
        }
      }).catch(e => {
        console.log('接口访问异常!', e)
      })
    },
    showChart(tableData) {
      let rowSize = tableData.length
      console.log("rowSize=", rowSize)
      for (let rowIndex = 0; rowIndex < rowSize; rowIndex++) {
        let oneRow = tableData[rowIndex];//一行记录
        let days = oneRow['days'];
        let d2 = [];
        let month1 = [];
        if (!days) {
          console.log("数据不存在,页面上if控制", days)
          return null
        } else {
          days.forEach(e => {
            //今开、当前价格、最低价格、最高价
            let d1 = [e['open'], e['close'], e['low'], e['high']]
            d2.push(d1)
            month1.push(e['date'])
          })
        }
        this.initEcharts(rowIndex, null, month1.reverse(), d2.reverse())
      }
      console.log("初始化图像完毕")
    },
    initEcharts(rowIndex, title, xAxis, seriesData) {
      const option = {
        title: {
          text: title
        },
        tooltip: {},
        legend: {
          left: '0',//距离z左侧
          right: '0',//距离右侧
          top: '0',//距离顶部
        },
        xAxis: {
          data: xAxis,
          axisLabel: {
            interval: 0, //坐标轴刻度标签的显示间隔，在类目轴中有效。
            rotate: 45  //空间不够，造成了数据的重叠 rotate:45,//横坐标字体旋转
          }
        },
        yAxis: {},
        series: [
          {
            type: "candlestick",
            data: seriesData //二维数组  今开、当前价格、最低价格、最高价
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart" + rowIndex));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
}
</script>
